<template>
    <div class="fillcontain">
        <search-item @showDialog="showAddFundDialog" @searchList="getMoneyList"></search-item>
        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                style="width: 100%"
                align='center'
                @select="selectTable"
                @select-all="selectAll"
                >
              <el-table-column
                v-if="idFlag"
                prop="id"
                label="id"
                align='center'
                width="180">
            </el-table-column>
            <el-table-column
                type="selection"
                align='center'
                width="60">
            </el-table-column>
              <el-table-column
                prop="goods_name"
                label="商品名称"
                align='center'
                width="180">
            </el-table-column>
              <el-table-column
                prop="price"
                label="商品价格"
                align='center'
                >
            </el-table-column>
            <el-table-column
                prop="is_on_sale"
                label="商品状态"
                align='center'
                >
                 <template slot-scope="scope">  
                     {{ scope.row.is_on_sale == '1'?"上架":"下架"}}
                </template>
            </el-table-column>
            <el-table-column
                prop="sales_sum"
                label="累计销量"
                align='center'
                sortable
                width="170">
            </el-table-column>
            <el-table-column
                prop="prize_num"
                label="累计中奖数量"
                align='center'
                width="130"
            >
            </el-table-column>
            <!-- :formatter="formatterType" -->
            <el-table-column
                prop="deliver_num"
                label="累计发货数量"
                align='center'
                width="130"
                sortable> 
            </el-table-column>
            <el-table-column
                prop="consign_num"
                label="累计寄售数量"
                align='center'
                width="130"
                sortable>
                <template slot-scope="scope">  
                    <span style="color:#4db3ff">{{ scope.row.accoutCash }}</span>
                </template>
            </el-table-column>
			<el-table-column
			    prop="add_time"
			    label="创建时间"
			    align='center'
			    width="150"
			    sortable>
			    <!-- <template slot-scope="scope">  
			        <span style="color:#4db3ff">{{ scope.row.accoutCash }}</span>
			    </template> -->
			</el-table-column>
            <el-table-column
                prop="operation"
                
                align='left'
                label="操作"
                width="240">
                <template  slot-scope='scope'>
                    <div class="two-line-btns">
                    <el-button 
                        icon='delete' 
                        size="mini"
                        @click='onDeleteMoney(scope.row,scope.$index)'
                    >
                     {{ scope.row.is_on_sale == '1'?"下架":"上架"}}
                    </el-button>
                    <el-button 
                        icon='edit' 
                        size="mini"
                        @click='onEditMoney(scope.row)'
                    >编辑</el-button>
                     <el-button 
                        icon='edit' 
                        size="mini"
                        @click='onDetailMoney(scope.row)'
                    >查看</el-button>
					<el-button
					    
					    icon='edit' 
					    size="mini"
					    @click='showWinningRecord(scope.row)'
					>中奖记录</el-button>
					<el-button 
					    icon='delete' 
					    size="mini"
					    @click='showPrizeSetting(scope.row,scope.$index)'
					>开奖设置</el-button>
                </div>
                </template>
            </el-table-column>
            </el-table>
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></pagination>
            <addFundDialog  
				v-if="addFundDialog.show"
                :isDetail="isDetail"
				 :isShow="addFundDialog.show" 
				 :dialogRow="addFundDialog.dialogRow"  
				 @getFundList="getMoneyList"  
				 @closeDialog="hideAddFundDialog">
			</addFundDialog>
			<winningRecord
				v-if="winningRecord.show"
				 :isShow="winningRecord.show" 
				 :dialogRow="winningRecord.dialogRow"  
				 @getFundList="winningRecord"  
				 @closeDialog="hideWinningRecord">
			</winningRecord>
			<prizeSetting
				v-if="prizeSetting.show"
				 :isShow="prizeSetting.show" 
				 :dialogRow="prizeSetting.dialogRow"  
				 @getFundList="prizeSetting"  
				 @closeDialog="hidePrizeSetting">
			</prizeSetting>
			
		</div>
    </div>
</template>

<script>
    import { mapGetters } from "vuex";
    import * as mutils from '@/utils/mUtils'
    import SearchItem from "./components/searchItem";
    import AddFundDialog from "./components/addFundDialog";
	import PrizeSetting from "./components/prizeSetting";
	import WinningRecord from "./components/winningRecord";
    import Pagination from "@/components/pagination";
    import { getGoodsList , updateGood } from "@/api/goods";

    export default {
        data(){
            return {
                tableData: [],
                tableHeight:0,
                loading:true,
                idFlag:false,
                isDetail: false,
                isShow:false, // 是否显示资金modal,默认为false
                editid:'',
                rowIds:[],
                sortnum:0,
                addFundDialog:{  
                    show:false,
                    dialogRow:{}
                },
				prizeSetting:{
				    show:false,
				    dialogRow:{}
				},
				winningRecord:{
				    show:false,
				    dialogRow:{}
				},
                incomePayData:{
                    page:1,
                    limit:20,
                    name:''
                },
                pageTotal:0,
                // 用于列表筛选
            }
        },
        components:{
            SearchItem,
            AddFundDialog,
            Pagination,
			WinningRecord,
			PrizeSetting
        },
        computed:{
            ...mapGetters(['search'])
        },
      	mounted() {
            this.getMoneyList();
	   },
	   methods:{
			hidePrizeSetting(row) {
				 this.prizeSetting.show = false;
			},
			hideWinningRecord(row) {
				 this.winningRecord.show = false;
			},
			showPrizeSetting(row) {
                this.prizeSetting.show = true;
                console.log(row);
                this.prizeSetting.dialogRow = row;
			},
			showWinningRecord(row) {
                 this.winningRecord.show = true;
                 this.winningRecord.dialogRow = row;
			},
            setAddress(value){

            },
            setTableHeight(){
                this.$nextTick(() => {
                   this.tableHeight =  document.body.clientHeight - 300
                })
            },
            // 获取资金列表数据
            getMoneyList(){
                const para = Object.assign({},this.incomePayData,this.search);
                getGoodsList(para).then(res => {
                     this.loading = false;
                     this.pageTotal = res.data.total
                     this.tableData = res.data.list
                })
            },
            // 显示资金弹框
            showAddFundDialog(val, isDetail){
                this.$store.commit('SET_DIALOG_TITLE', val);
                if(val === 'add') {
                    this.addFundDialog.dialogRow = {};
                }
                if(isDetail) {
                    this.isDetail = true;
                } else {
                    this.isDetail = false;
                }
                //  this.addFundDialog.dialogRow = {};
                this.addFundDialog.show = true;
            },
            hideAddFundDialog(){
                this.addFundDialog.show = false;
            },
            // 上下分页
            handleCurrentChange(val){
                this.incomePayData.page = val;
                this.getMoneyList()
            },
            // 每页显示多少条
            handleSizeChange(val){
                this.incomePayData.limit = val;
                this.getMoneyList()
            },
            getPay(val){
               if(mutils.isInteger(val)){
                   return -val;
               }else{
                   return val;
               }
            },
            /**
            * 格式化状态
            */
            formatterType(item) {
                const type = parseInt(item.incomePayType);
                return this.format_type_list[type];
            },
            filterType(value, item) {
                const type = parseInt(item.incomePayType);
                return this.format_type_list[value] == this.format_type_list[type];
            },
            // 编辑操作方法
            onEditMoney(row){
                this.addFundDialog.dialogRow = {...row};
                console.log(this.addFundDialog.dialogRow);
                this.showAddFundDialog('');
            },
            onDetailMoney(row) {
                this.addFundDialog.dialogRow = {...row};
                this.showAddFundDialog('', true);
            }, 
            // 删除数据
            onDeleteMoney(row){
                let text = "下";
                if (row.is_on_sale == '0') {
                    text = '上';
                }
                this.$confirm(`确认${text}架该商品吗?`, '提示', {
                    type: 'warning'
                })
                .then(() => {
                    const para = { goodsId: row.id, status: row.is_on_sale == '1'?'0':'1'}
                    updateGood(para).then(res => {
                        this.$message({
                            message: `${text}架成功`,
                            type: 'success'
                        })
                        this.getMoneyList()
                    })
                })
                .catch(() => {})
            },
           
            // 当用户手动勾选数据行的 Checkbox 时触发的事件
            selectTable(val, row){
                this.setSearchBtn(val);
            },
            // 用户全选checkbox时触发该事件
            selectAll(val){
                 val.forEach((item) => {
                     this.rowIds.push(item.id);
                });
                this.setSearchBtn(val);
            },
            setSearchBtn(val){
                let isFlag = true;
                if(val.length > 0){
                    isFlag = false;
                }else{
                    isFlag = true;
                }
                this.$store.commit('SET_SEARCHBTN_DISABLED',isFlag);
            }
        },
    }
</script>

<style lang="less" scoped>
    .table_container{
        padding: 10px;
        background: #fff;
        border-radius: 2px;
    }
    .el-dialog--small{
       width: 600px !important;
    }
    .pagination{
        text-align: left;
        margin-top: 10px;
    }
    .two-line-btns{
        .el-button{
            margin-left: 0;
            margin-right: 5px;
        }
        .el-button:first-child{
            margin-bottom: 5px;
        }
    }
</style>


